<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		
		<div class="mui-content">

			<ul class="mui-table-view">
				<li class="mui-table-view-cell">

					<table>
						<tr style="height: 10;">

							<td style="width: 20%;">
								<p> 监测点</p>

							</td>
							<td>
								<select name="city " id="city " class="city pickout " style="background:#B6B6B6; margin-left: 3rem;">
									<option selected=" " value="bj ">所有</option>
									<option value="sh ">1号监测点</option>
									<option value="gz ">2号监测点</option>
									<option value="sz ">3号监测点</option>
									<option value="xg ">4号监测点</option>
									<option value="sjz ">5号监测点</option>
									<option value="cd ">6号监测点</option>
								</select>
							</td>
					</table>
					</tr>
				</li>
				<li>
					<table>

						<tr>
							<td style="width: 20%; "> <img style="margin-left:2rem; " class=" mui-pull-rgin-top: 1rem;left " src="images/time.png ">
							</td>
							<td>
								<p style="margin-left: 2rem;margin-top: 1rem; "> 2017/8/1&emsp;8:37</p>
							</td>
						</tr>
						<tr>
							<td style="width: 20%; "> <img style="margin-left:2rem; " class=" mui-pull-rgin-top: 1rem;left " src="images/map.png">
							</td>
							<td>
								<p style="margin-left: 2rem;margin-top: 1rem; ">河南国家科技园</p>
							</td>
						</tr>
						<tr>
							<td style="width: 20%; "> <img style="margin-left:2rem; " class=" mui-pull-rgin-top: 1rem;left " src="images/wendu.png">
							</td>
							<td>
								<p style="margin-left: 2rem;margin-top: 1rem; ">2℃-15℃</p>
							</td>
						</tr>
						<tr>
							<td style="width: 20%; "> <img style="margin-left:2rem; " class=" mui-pull-left " src="images/qushi.png">
							</td>
							<td colspan="2">
								<p style="margin-left: 2rem;margin-top: 1rem; ">实时数据</p>
							</td>
						</tr>

					</table>
				</li>
				<table>
					<tr>
						<td style="width: 50%; ">
							<select name="city " id="city " class="city pickout " style="background:#B6B6B6; margin-left: 2rem;">
								<option selected=" " value="bj ">PM2.5</option>
								<option value="sh ">PM10</option>
								<option value="gz ">NO</option>
								<option value="sz ">NO₂</option>
								<option value="xg ">SO</option>
							</select>
						</td>
						<td colspan="2">
							<select name="city " id="city " class="city pickout " style="background:#B6B6B6; margin-left: 4rem;">
								<option selected=" " value="bj ">12小时</option>
								<option value="sh ">24小时</option>
								<option value="gz ">72小时</option>
								<option value="sz ">7天</option>
							</select>
						</td>
					</tr>
				</table>

			</ul>
			<div id='canvasDiv'></div>
		</div>
		
	</body>
	<script src="js/mui.min.js "></script>
	<script type="text/javascript" src="js/ichart.1.2.min.js"></script>
	<!--<script src="js/mui.picker.js "></script>
	<script src="js/mui.poppicker.js "></script>
	-->

	<link rel=" stylesheet " href="css/mui.jss.css " />
	<!--<link rel=" stylesheet " href="css/mui.picker.css " />
	<link rel=" stylesheet " href="css/mui.poppicker.css " />-->
	<script type="text/javascript " charset="utf-8 ">
		(function($) {
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var data = [{
				name: '北京',
				value: [-9, 1, 12, 20, 26, 30, 32, 29, 22, 12, 0, -6],
				color: '#1f7e92',
				line_width: 3
			}];
			var chart = new iChart.LineBasic2D({
				render: 'canvasDiv',
				data: data,
				width: window.width,
				height: 250,
				coordinate: { height: '80%', background_color: '#f6f9fa' },
				sub_option: {
					hollow_inside: false, //设置一个点的亮色在外环的效果
					point_size: 16
				},
				labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
			});
			chart.draw();

		})(mui);
	</script>

</html>